<!-- 登录注册页 -->
<template>
  <div class="login-page">
    <div class="login-from">
      <h2 class="title">灯具电商管理后台</h2>
      <div class="from-box">
        <div class="from-fun">
          <div class="cut" :class="{ active: cutid == 0 }" @click="cut(0)">
            登录
          </div>
          <div class="cut" :class="{ active: cutid == 1 }" @click="cut(1)">
            注册
          </div>
        </div>
        <div class="login" v-if="cutid == 0">
          <div class="input-box">
            <div class="ipt">
              <el-input
                v-model="input1"
                class="w-50 m-2"
                placeholder="账号"
                :prefix-icon="Avatar"
                maxlength="15"
              />
            </div>
            <div class="ipt">
              <el-input
                v-model="input2"
                class="w-50 m-2"
                type="password"
                placeholder="密码"
                :prefix-icon="Lock"
                maxlength="20"
                show-password
              />
            </div>
          </div>
          <div class="reset">
            <div class="No-login">
              <input type="checkbox" id="check" v-model="check" />
              <label for="check">7天免登录</label>
            </div>
            <div class="reset-pwd">
              <span>忘记密码</span>
            </div>
          </div>
          <div class="btn">
            <el-button :plain="true" type="primary" @click="login"
              >登录</el-button
            >
          </div>
          <div class="hint" :class="{ show: hintShow }" v-if="hintShow">
            <p>{{ msg }}</p>
          </div>
        </div>
        <div class="reg" v-if="cutid == 1">
          <div class="input-box">
            <div class="ipt">
              <el-input
                v-model="nm"
                class="w-50 m-2"
                placeholder="用户名"
                :prefix-icon="Avatar"
                maxlength="15"
              />
            </div>
            <div class="ipt">
              <el-input
                v-model="acc"
                class="w-50 m-2"
                placeholder="手机号"
                :prefix-icon="Notebook"
                maxlength="15"
              />
            </div>
            <div class="ipt">
              <el-input
                v-model="pwd"
                type="password"
                placeholder="密码"
                :prefix-icon="Lock"
                maxlength="20"
                show-password
              />
            </div>
          </div>
          <div class="btn">
            <el-button type="primary" @click="enroll">注册</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Avatar, Lock, Notebook } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import axios from "axios";
import { ElMessage } from "element-plus";
let store = useStore();

const router = useRouter(); // 获取路由跳转
// 登录接收参数
let input1 = ref(""); // 登录账号输入内容
let input2 = ref(""); // 登录密码输入内容
// 注册接收参数
let nm = ref(""); // 注册用户名输入内容
let acc = ref(""); // 注册手机号内容
let pwd = ref(""); // 注册密码输入内容

let check = ref("");
let msg = ref(""); // 提示信息

let cutid = ref(0); // 切换功能id
let hintShow = ref(false); // 提示信息显示隐藏

// 切换注册/登录
let cut = (id) => {
  cutid.value = id;
};

// 登录
let login = () => {
  if (input1.value == "" || input2.value == "") {
    hintShow.value = true;
    msg.value = "不能为空";
    return;
  }
  let tokenTime = check.value ? 168 : 24;
  axios
    .post("http://192.168.27.59/worker/workerLogin", {
      acc: input1.value,
      pwd: input2.value,
      tokenTime,
    })
    .then((res) => {
      if (res.data.code == 500) {
        ElMessage.error("请输入正确的账号");
        return;
      }
      if (res.data.code == 400) {
        ElMessage.error(res.data.message);
        return;
      }
      if (res.data.code == 200) {
        ElMessage({
          message: "登录成功",
          type: "success",
        });
        // 登录成功将用户信息保存到cookie
        let dataObj = res.data.data[0];
        var d = new Date();
        d.setTime(d.getTime() + tokenTime * 60 * 60 * 1000);
        var expires = "expires=" + d.toGMTString();
        document.cookie = `username=${dataObj.username}; expires` + expires;
        document.cookie = `userAcc=${dataObj.userAcc}; expires` + expires;
        document.cookie = `id=${dataObj.id}; expires` + expires;
        document.cookie = `token=${dataObj.token}; expires` + expires;
        document.cookie = `userPic=${dataObj.userPic}; expires` + expires;
        router.push({ path: "/home" });
        // 登录成功将用户信息保存到vuex
        let info = document.cookie.replace(/\s*/g, "").split(";");
        let obj = {};
        info.map((item) => {
          item.split("=");
          let keyName = item.split("=")[0];
          let keyVal = item.split("=")[1];
          obj[keyName] = keyVal;
        });
        store.commit("getUserInfo", obj);
      }
    });
};
// 注册
let enroll = () => {
  if (nm.value == "") {
    console.log("用户名不能为空");
    return;
  }
  if (acc.value == "") {
    console.log("手机号不能为空");
    return;
  }
  if (pwd.value == "") {
    console.log("密码不能为空");
    return;
  }
  axios
    .post("http://192.168.27.59/worker/workerRegworker", {
      nm: nm.value,
      acc: acc.value,
      pwd: pwd.value,
    })
    .then(function (response) {
      console.log(response);
    });
};
</script>

<style lang="scss" scoped>
.login-page {
  width: 100vw;
  min-height: 100vh;
  background: url("../assets/bg.png") no-repeat;
  background-size: cover;
  overflow: hidden;
  .login-from {
    width: 20vw;
    text-align: center;
    margin: 26vh auto;
    .title {
      font-size: 30px;
      margin-bottom: 40px;
    }
    .from-box {
      width: 100%;
      .from-fun {
        display: flex;
        justify-content: space-around;
        .cut {
          cursor: pointer;
          padding: 4px 0;
        }
        .cut.active {
          color: #409eff;
          border-bottom: 1px solid #409eff;
        }
      }
      .login,
      .reg {
        .reset {
          margin: 3vmin 0 2vmin;
          width: 100%;
          overflow: hidden;
          .No-login {
            float: left;
            font-size: 13px;
            color: #666;
          }
          .reset-pwd {
            float: right;
            font-size: 14px;
            color: #409eff;
            cursor: pointer;
          }
        }
        .input-box {
          width: 100%;
          .ipt {
            margin: 2vmin 0;
          }
        }
        .btn {
          width: 100%;
          button {
            width: 100%;
          }
        }
        .hint {
          width: 100%;
          line-height: 40px;
          background-color: skyblue;
          text-align: center;
          overflow: hidden;
        }
        .hint.show {
          animation: move 5s;
        }
        @keyframes move {
          0% {
            height: 0;
          }
          50% {
            height: 40px;
          }
          100% {
            height: 0;
          }
        }
      }
    }
  }
}
.el-message {
  display: block;
}
</style>
